<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源导入进度</title>
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <style>
        .progress-card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            padding: 20px;
            margin-bottom: 20px;
        }
        .progress-card:hover {
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        .progress {
            height: 20px;
            border-radius: 10px;
            margin: 15px 0;
        }
        .progress-bar {
            transition: width 0.6s ease;
        }
        .status-text {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .detail-text {
            color: #666;
            margin-bottom: 15px;
        }
        .actions {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card progress-card">
                    <div class="card-body">
                        <h3 class="card-title">
                            <i class="fas fa-file-import mr-2"></i>
                            <span th:text="${packageName != null ? packageName : '资源导入进度'}">资源导入进度</span>
                        </h3>
                        
                        <p class="status-text" id="importStatusText">正在准备导入...</p>
                        <p class="detail-text" id="importDetailText"></p>
                        
                        <div class="progress">
                            <div id="importProgressBar" class="progress-bar bg-primary" role="progressbar" 
                                 style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        
                        <div class="actions text-right">
                            <a href="javascript:void(0)" id="btnRefresh" class="btn btn-sm btn-info">
                                <i class="fas fa-sync-alt"></i> 刷新
                            </a>
                            <a th:href="@{'/tasking/taskPackage/list'}" class="btn btn-sm btn-secondary ml-2">
                                <i class="fas fa-list"></i> 任务包列表
                            </a>
                            <a href="javascript:void(0)" id="btnBack" class="btn btn-sm btn-primary ml-2" style="display:none">
                                <i class="fas fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 操作提示卡片 -->
                <div class="card progress-card" id="completedCard" style="display:none">
                    <div class="card-body">
                        <h4 class="text-success">
                            <i class="fas fa-check-circle"></i> 导入完成
                        </h4>
                        <p>资源已成功导入到任务包中，您可以：</p>
                        <div class="row">
                            <div class="col-md-6">
                                <a th:href="@{'/tasking/taskPackage/detail?id=' + ${taskPackageId}}" class="btn btn-outline-primary btn-block">
                                    <i class="fas fa-eye"></i> 查看任务包详情
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a th:href="@{'/tasking/taskPackage/allocation?id=' + ${taskPackageId}}" class="btn btn-outline-success btn-block">
                                    <i class="fas fa-users"></i> 分配资源
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 错误提示卡片 -->
                <div class="card progress-card bg-light" id="errorCard" style="display:none">
                    <div class="card-body">
                        <h4 class="text-danger">
                            <i class="fas fa-exclamation-triangle"></i> 导入过程中出现问题
                        </h4>
                        <p id="errorMessage">导入过程中出现了一些问题，部分数据可能未成功导入。</p>
                        <div class="text-right">
                            <a th:href="@{'/tasking/taskPackage/add'}" class="btn btn-outline-primary">
                                <i class="fas fa-plus"></i> 重新导入
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript依赖 -->
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/assets/js/fontawesome.min.js}"></script>
    <script th:src="@{/js/taskPackage/importProgress.js}"></script>

    <script th:inline="javascript">
        $(function() {
            // 获取任务包ID和名称
            const taskPackageId = [[${taskPackageId}]];
            const returnUrl = [[${returnUrl}]];
            
            if (taskPackageId) {
                // 初始化进度监控
                const progressMonitor = initImportProgress(taskPackageId, {
                    onComplete: function(data) {
                        // 显示完成卡片
                        $('#completedCard').fadeIn();
                        // 隐藏刷新按钮
                        $('#btnRefresh').hide();
                        // 显示返回按钮
                        $('#btnBack').show();
                    },
                    onError: function(data) {
                        // 显示错误卡片
                        $('#errorCard').fadeIn();
                        // 设置错误信息
                        if (data.errorMessage) {
                            $('#errorMessage').text(data.errorMessage);
                        }
                        // 显示返回按钮
                        $('#btnBack').show();
                    }
                });
                
                // 刷新按钮点击事件
                $('#btnRefresh').on('click', function() {
                    progressMonitor.check();
                });
                
                // 返回按钮点击事件
                $('#btnBack').on('click', function() {
                    if (returnUrl) {
                        window.location.href = returnUrl;
                    } else {
                        window.location.href = '/tasking/taskPackage/list';
                    }
                });
            } else {
                // 没有任务包ID，显示错误信息
                $('#importStatusText').text('无法监控导入进度');
                $('#importDetailText').text('未提供任务包ID，无法监控导入进度');
                $('#importProgressBar').addClass('bg-danger').css('width', '100%');
            }
        });
    </script>
</body>
</html> 